<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-6">支付测试</h1>

    <a-row :gutter="16">
      <!-- 左侧：支付方式选择 -->
      <a-col :span="16">
        <a-card>
          <template #title>
            <div class="flex items-center">
              <wallet-outlined class="mr-2" />
              支付方式
            </div>
          </template>

          <!-- 支付方式选择 -->
          <div class="space-y-6">
            <!-- 微信支付 -->
            <div class="payment-section hover:shadow-md transition-shadow duration-300">
              <div class="section-header">
                <wechat-outlined class="text-green-500 text-2xl" />
                <span class="text-lg font-medium ml-2">微信支付</span>
              </div>
              <a-radio-group v-model:value="selectedPayMethod" class="w-full mt-6">
                <a-row :gutter="16">
                  <a-col :span="8">
                    <a-radio-button value="wechat_qrcode" class="w-full payment-option">
                      <qrcode-outlined class="mr-2 text-lg" />
                      微信二维码
                    </a-radio-button>
                  </a-col>
                  <a-col :span="8">
                    <a-radio-button value="wechat_barcode" class="w-full payment-option">
                      <barcode-outlined class="mr-2 text-lg" />
                      微信条码
                    </a-radio-button>
                  </a-col>
                  <a-col :span="8">
                    <a-radio-button value="wechat_jsapi" class="w-full payment-option">
                      <wechat-outlined class="mr-2 text-lg" />
                      公众号
                    </a-radio-button>
                  </a-col>
                </a-row>
              </a-radio-group>
            </div>

            <!-- 支付宝支付 -->
            <div class="payment-section hover:shadow-md transition-shadow duration-300">
              <div class="section-header">
                <alipay-outlined class="text-blue-500 text-2xl" />
                <span class="text-lg font-medium ml-2">支付宝支付</span>
              </div>
              <a-radio-group v-model:value="selectedPayMethod" class="w-full mt-6">
                <a-row :gutter="16">
                  <a-col :span="8">
                    <a-radio-button value="alipay_qrcode" class="w-full payment-option">
                      <qrcode-outlined class="mr-2 text-lg" />
                      支付宝二维码
                    </a-radio-button>
                  </a-col>
                  <a-col :span="8">
                    <a-radio-button value="alipay_barcode" class="w-full payment-option">
                      <barcode-outlined class="mr-2 text-lg" />
                      支付宝条码
                    </a-radio-button>
                  </a-col>
                  <a-col :span="8">
                    <a-radio-button value="alipay_jsapi" class="w-full payment-option">
                      <alipay-outlined class="mr-2 text-lg" />
                      支付宝生活号
                    </a-radio-button>
                  </a-col>
                </a-row>
              </a-radio-group>
            </div>

            <!-- 聚合支付 -->
            <div class="payment-section hover:shadow-md transition-shadow duration-300">
              <div class="section-header">
                <appstore-outlined class="text-purple-500 text-2xl" />
                <span class="text-lg font-medium ml-2">聚合支付</span>
              </div>
              <a-radio-group v-model:value="selectedPayMethod" class="w-full mt-6">
                <a-row :gutter="16">
                  <a-col :span="8">
                    <a-radio-button value="union_barcode" class="w-full payment-option">
                      <barcode-outlined class="mr-2 text-lg" />
                      聚合被扫
                    </a-radio-button>
                  </a-col>
                  <a-col :span="8">
                    <a-radio-button value="union_qrcode" class="w-full payment-option">
                      <qrcode-outlined class="mr-2 text-lg" />
                      聚合主扫
                    </a-radio-button>
                  </a-col>
                  <a-col :span="8">
                    <a-radio-button value="union_static" class="w-full payment-option">
                      <qrcode-outlined class="mr-2 text-lg" />
                      聚合静态码
                    </a-radio-button>
                  </a-col>
                </a-row>
              </a-radio-group>
            </div>
          </div>

          <!-- 支付二维码展示 -->
          <div v-if="showQrcode" class="text-center p-6 border rounded-lg mt-6 bg-gray-50">
            <qrcode-vue :value="payQrcodeUrl" :size="200" level="H" />
            <p class="mt-4 text-gray-500">请使用{{ getPayMethodName() }}扫码支付</p>
          </div>
        </a-card>
      </a-col>

      <!-- 右侧：订单信息和操作 -->
      <a-col :span="8">
        <div class="space-y-4">
          <!-- 订单信息 -->
          <a-card>
            <template #title>
              <div class="flex items-center">
                <file-outlined class="mr-2" />
                订单信息
              </div>
            </template>
            <a-descriptions :column="1" size="small">
              <a-descriptions-item label="订单编号">
                {{ orderInfo.orderNo }}
              </a-descriptions-item>
              <a-descriptions-item label="订单金额">
                <span class="text-red-500 font-bold">¥{{ orderInfo.amount }}</span>
              </a-descriptions-item>
              <a-descriptions-item label="商品名称">
                {{ orderInfo.productName }}
              </a-descriptions-item>
              <a-descriptions-item label="创建时间">
                {{ orderInfo.createTime }}
              </a-descriptions-item>
              <a-descriptions-item label="支付方式">
                {{ getPayMethodName() }}
              </a-descriptions-item>
              <a-descriptions-item label="订单状态">
                <a-tag :color="orderInfo.status === 'PAID' ? 'success' : 'warning'">
                  {{ orderInfo.status === 'PAID' ? '已支付' : '待支付' }}
                </a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <!-- 订单操作 -->
          <a-card>
            <template #title>
              <div class="flex items-center">
                <shopping-cart-outlined class="mr-2" />
                订单操作
              </div>
            </template>

            <!-- 订单金额输入 -->
            <a-form layout="vertical">
              <a-form-item label="订单金额">
                <a-input-number
                  v-model:value="orderInfo.amount"
                  :min="0.01"
                  :max="999999"
                  :precision="2"
                  :step="0.01"
                  class="w-full"
                />
              </a-form-item>
              <a-form-item label="商品名称">
                <a-input v-model:value="orderInfo.productName" placeholder="请输入商品名称" />
              </a-form-item>
              <a-form-item>
                <a-button
                  type="primary"
                  class="w-full"
                  :loading="paying"
                  @click="handlePay"
                >
                  立即支付
                </a-button>
              </a-form-item>
            </a-form>

            <!-- 支付结果 -->
            <div v-if="payResult" class="mt-4 p-4 border rounded-lg">
              <a-result
                :status="payResult.success ? 'success' : 'error'"
                :title="payResult.success ? '支付成功' : '支付失败'"
                :sub-title="payResult.message"
              >
                <template #extra>
                  <a-button type="primary" @click="handleCreateNewOrder">
                    创建新订单
                  </a-button>
                </template>
              </a-result>
            </div>
          </a-card>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import QrcodeVue from 'qrcode.vue'
import {
  WalletOutlined,
  WechatOutlined,
  QrcodeOutlined,
  MobileOutlined,
  AlipayOutlined,
  AppstoreOutlined,
  FileOutlined,
  ShoppingCartOutlined,
  BarcodeOutlined
} from '@ant-design/icons-vue'

// 支付方式相关
const activePayTypes = ref(['wechat'])
const selectedPayMethod = ref('wechat_jsapi')
const showQrcode = ref(false)
const payQrcodeUrl = ref('')
const paying = ref(false)

// 订单信息
const orderInfo = reactive({
  orderNo: generateOrderNo(),
  amount: 0.01,
  productName: '测试商品',
  createTime: new Date().toLocaleString(),
  status: 'PENDING'
})

// 支付结果
const payResult = ref<{
  success: boolean
  message: string
} | null>(null)

// 生成订单号
function generateOrderNo() {
  return 'TEST' + Date.now().toString().slice(-8) + Math.random().toString(36).slice(-4).toUpperCase()
}

// 获取支付方式名称
function getPayMethodName() {
  const methodMap: Record<string, string> = {
    wechat_qrcode: '微信二维码支付',
    wechat_barcode: '微信条码支付',
    wechat_jsapi: '微信公众号支付',
    alipay_qrcode: '支付宝二维码支付',
    alipay_barcode: '支付宝条码支付',
    alipay_jsapi: '支付宝生活号支付',
    union_barcode: '聚合被扫支付',
    union_qrcode: '聚合主扫支付',
    union_static: '聚合静态码支付'
  }
  return methodMap[selectedPayMethod.value] || '未知支付方式'
}

// 处理支付
const handlePay = async () => {
  if (!orderInfo.amount || orderInfo.amount <= 0) {
    message.error('请输入有效的订单金额')
    return
  }

  if (!orderInfo.productName) {
    message.error('请输入商品名称')
    return
  }

  paying.value = true
  try {
    // TODO: 调用后端支付接口
    // 模拟支付过程
    await new Promise(resolve => setTimeout(resolve, 2000))

    // 根据支付方式显示二维码或跳转
    if (selectedPayMethod.value.includes('native')) {
      showQrcode.value = true
      payQrcodeUrl.value = `https://example.com/pay/${orderInfo.orderNo}`
    } else if (selectedPayMethod.value.includes('h5')) {
      window.open(`https://example.com/pay/${orderInfo.orderNo}`, '_blank')
    } else {
      // JSAPI支付，模拟支付成功
      orderInfo.status = 'PAID'
      payResult.value = {
        success: true,
        message: '支付成功'
      }
    }
  } catch (error) {
    payResult.value = {
      success: false,
      message: '支付失败，请重试'
    }
  } finally {
    paying.value = false
  }
}

// 创建新订单
const handleCreateNewOrder = () => {
  orderInfo.orderNo = generateOrderNo()
  orderInfo.amount = 0.01
  orderInfo.productName = '测试商品'
  orderInfo.createTime = new Date().toLocaleString()
  orderInfo.status = 'PENDING'
  showQrcode.value = false
  payQrcodeUrl.value = ''
  payResult.value = null
}
</script>

<style scoped>
.ant-card {
  border-radius: 8px;
}

.payment-section {
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fff;
}

.section-header {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.payment-option {
  text-align: left;
  padding: 12px 16px;
  height: auto;
  line-height: 1.5;
  border-radius: 4px !important;
  margin-bottom: 8px;
  transition: all 0.3s;
}

.payment-option:hover {
  background: #f5f5f5;
}

.ant-radio-button-wrapper-checked {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

.ant-descriptions-item-label {
  width: 120px;
  color: #666;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}
</style>